<template>
	
	
<view class="all">
	<view class="custom-navbar-father">
		<view class="custom-navbar">
			 <view class="back-icon" @click="goBack">
			   <img src="../../static/民族风-返回.png" alt="" class="icon" />
			  </view>
		  <!-- <text class="custom-title">技能培训广场</text> -->
		      <span class="tag">技能培训广场</span>
		</view>
		<view class="search-box-father">
				<!-- <button class="search-box" > -->
					<!-- <img src="../../static/搜索.png" class="search-icon" />
					<input type="text" v-model="inputContent" placeholder="搜索培训" style="width: 100%;" /> -->
					<!-- </button> -->
					<view class="search-box">
						<uni-easyinput prefixIcon="search" v-model="inputContent" placeholder="请输入内容" ></uni-easyinput>
					</view>
					
					<button class="search-button"   @click="search(inputContent)">搜索</button>
		
		</view>
	</view>
			
	
	
 
  <div class="box">
	  	
	  <scroll-view class="scroll1" scroll-y="true" >
    <!-- 刷新页面后的顶部提示框 -->
	
    <div class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条最新新闻动态</div>

    <!-- 列表布局 -->
    <ul class="uni-list" :key=keyvalue>
      <!-- key的更新允许了组件被重新加载 -->
	 
      <li v-for="item in skilltrainList" :key="item.id" class="uni-list-item">
        <a :href="item.fileUrl" class="list-link" 
		@click="downloadAndOpenPDF(item)"
		>
          <div class="uni-thumb">
            <img :src="item.imageUrl" class="thumb-image" alt="thumbnail">
          </div>
          <div class="list-content">
            <div class="title">{{ item.title }}</div>
			<div class="description">{{ item.description}}</div>
			<div class="label">
				<!-- <button class="tag">
					{{item.tag}}
				</button> -->
				<!-- 之前的样式 -->
				{{item.tag}}
				<!-- <button class="brown">
					{{item.label2}}
				</button>
				<button class="green">
					{{item.label3}}
				</button> -->
			</div>  <!-- {{ item.label1}}  {{ item.label2}}  {{ item.label3}}</div> -->
			
			
          </div>
		  <view class="list-content-son">
		  	<div class="population">浏览人数：{{ item.views}}</div>
		  	<div class="note2">{{ item.organization }} {{ item.createTime }}</div>
		  </view>
        </a> 
		
      </li>
    </ul>
 
    <!-- 加载状态指示器 -->
    <div v-if="loading" class="uni-load-more">加载中...</div>
    <div v-if="noMore" class="uni-load-more">没有更多内容了</div>
		
	</scroll-view>
  </div>
  <view class="888">
  	这不是终点
  </view>
  </view>
    <custom-tab-bar />
</template>

<script setup>
import { ref } from 'vue'; 
import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue'; 
import {
		apiGetSkillTrainList
	} from '../../api/skilltrain.js';
import {
		apiGetSkillTrainDetail
	} from '../../api/skilltrain.js';
const skilltrainList = ref([])
	const parameterModel2 = ref({
		pageNo: 1,
		pageSize: 9
		
	})
	const parameterModel3 = ref({
		title:1,
		pageNo: 1,
		pageSize: 100
		
	})
	//根据活动名称查询活动
	const getSkilltrainDetail = async (item) => {
		parameterModel3.value.title=item.title;
		const res = await apiGetSkillTrainDetail(parameterModel3.value);
		 const recordsString = JSON.stringify(res.records);
		   uni.navigateTo({
		     url: `/pages/skilltrain/skilltraindetail?records=${encodeURIComponent(recordsString)}`//页面传参
		   });
		console.log(res.records)
	}	
	const getSkilltainList = async () => {
		const res = await apiGetSkillTrainList(parameterModel2.value)
		skilltrainList.value = res.records
		// activityList.value.forEach((item) => {})
		console.log(skilltrainList.value)
		
	}	 
	getSkilltainList();
	//下拉刷新
	
const items = ref([
  // 静态数据示例
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普666',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  { id: 1, title: 'AI制作科普视频', user_name: '广东省科普志愿者协会', description: '使用AI制作出高质量的科普视频，成为新时代的科普工作者！',label1:'AI',  label2:'科普',   label3:'创新' ,population:'8899',last_modify_date: '2024-12-7', avatar: '../../static/bg.jpg' },
  
 
  
  
  // ...更多列表项
]);

const loading = ref(false);
const noMore = ref(false);
const tipShow = ref(false);
 
 
 


 
 
 
 
//模拟下拉刷新

function onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
	//根据活动名搜索活动
	const inputContent=ref();
	var keyvalue=ref(0);
	const search= async (inputContent) =>{
		console.log(inputContent);
		parameterModel3.value.title=inputContent;
		const res = await apiGetSkillTrainDetail(parameterModel3.value);
		console.log(res.records);
		keyvalue.value=keyvalue.value+1;
		console.log(keyvalue.value);
		skilltrainList.value = res.records;
		
	}
//实现打开培训活动的pdf文件
const downloadAndOpenPDF = async (item) => {
  uni.showModal({
    title: '提示',
    content: "是否下载查看技能培训的.PDF",
    success: async (modalRes) => {
      if (modalRes.confirm) { // 用户点击了确定
        parameterModel3.value.title = item.title;
        const res = await apiGetSkillTrainDetail(parameterModel3.value);
        console.log(res.records[0].fileUrl);
        uni.downloadFile({
          url: res.records[0].fileUrl,
          success: (downloadRes) => {
            if (downloadRes.statusCode === 200) {
              let filePath = downloadRes.tempFilePath;
              uni.openDocument({
                filePath: filePath,
                showMenu: true,
                success: (data) => {
                  console.log('打开文档成功');
                },
                fail: (error) => {
                  console.error('打开文档失败', error);
                }
              });
            } else {
              console.error('下载文件失败', downloadRes.statusCode);
            }
          },
          fail: (error) => {
            console.error('下载文件失败', error);
          }
        });
      } else if (modalRes.cancel) { // 用户点击了取消
        // 这里处理取消的情况，例如可以返回或者做其他操作
        console.log('用户取消了操作');
        return;
      }
    }
  });
};
function goBack(){
	 wx.navigateBack({
	      delta: 1 // 返回上一页面
	    })
}
// 模拟上拉加载更多
function onReachBottom() {
  // 这里可以添加逻辑来加载更多数据
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    noMore.value = true; // 假设没有更多数据了
  }, 1000); 
}

// 暴露方法，以便可以在模板或其他地方调用
defineExpose({
  
  onReachBottom
});
</script>

<style scoped>
/* 样式表内容，保持与原始样式一致 */
.all{
	background-color:  #dddddd;
	
	/* position: fixed;
	border-radius: 0 0 10px 10px;
	z-index: 1000;
	background: 梅花url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/8bdad164-877e-4915-a0dc-4051c391660c.png);
	//梅花修改版https://registration-system1.oss-cn-guangzhou.aliyuncs.com/4c7d1fc3-5ecf-4757-81ec-ccb7969adcf6.png
	background-size: cover;
	width: 100%; */
	 /* 星空background: url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/ec421900-6130-4cf4-af01-96171f551e08.png); */ 
}
.custom-navbar-father{
	position: fixed;
	/* border-radius: 0 0 10px 10px; */
	z-index: 1000;
	background: url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/4c7d1fc3-5ecf-4757-81ec-ccb7969adcf6.png);
	top: -10px;
	background-size: cover;
	width: 100%;
}
.custom-navbar {
  position: relative;
  top: -1px;
  left: 0;
  width: 100%;
  height: 80px; /* 导航栏高度 */
  /* background-color: #00BFFF; */
  display: flex;
  justify-content: center;
  color: white;
  z-index: 999;
  
}
.icon{
	position: absolute;
	  height: 37px;
	  width: 50px;

	  margin-top: 27px;

	  margin-left: 10px;
	 
  }
  
.custom-title {
  font-size: 20px; /* 设置你想要的大小 */

  margin-top: 31px;

  font-weight: bold;
  margin-left: auto; /* 使标题向右对齐 */
    margin-right: auto; /* 使标题向左对齐，与 margin-left: auto 配合实现居中 */
}
.search-box-father{
	margin-top: 10px;
	margin-bottom: 0px;
	position: relative;
	/* background-color: #FFFFFF; */
	width: 100%;
	height: 35px;
	display: flex;
	align-items: center;
	border-radius: 0 0 10px 10px;
}
.search-box{
	font-size: 14px;
	height: 20px;
	width: 70%;
	background-color:lightgray;
	color: dimgray;
	line-height: 19px;
	display: flex;
	border-radius: 10px;
	position: relative;
	top: -20px;
	margin-left: auto;
	margin-left: auto;
	
	
}
.search-icon{
	height: 20px;
	width: 20px;
}
.search-button{
	position: relative;
	width: 20%;
	height: 37px;
	border-radius: 5px;
	bottom: 12px;
	line-height: 34px;
	margin-right: auto;
	margin-left: auto;
	padding: 1px;
	border: #b1b1b0 solid 1px;
	font-weight: 400;
	font-size: 18px;
	color: gray;		
}
.scroll1{
	margin-top: 95px;
	height: 77vh;
	
	width: 95%;
	/* border: gray solid 2px; */
	background: transparent;
	position: fixed;
} 
.box {
	margin-top: 25px;
   height: 99vh; 
  display: flex;
  flex-direction: column;
align-items: center;

}

.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}

.uni-list {
  list-style: none;
  padding: 0;
}

.uni-list-item {
	height: 130px;
	
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #eee;
  position: relative;
  background-color: #eeeeee;
  margin-top: 10px;
  margin-bottom: 10px;
 
  border-radius: 10px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ /* 添加阴影 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
	position: relative;
}

.list-link {
  display: flex;
  text-decoration: none;
  color: inherit;
  width: 100%;
  
}

.uni-thumb {
  margin-right: 10px;
}

.thumb-image {
  width: 80px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  
}

.list-content {
  flex: 1;
  position: relative;
}

.title {
  font-size: 16px;
  font-weight: bold;
}
.description{
	font-size: 13px;
}
.label {
	width: auto;
	height: 10px;
	background-color: #ffdbdb;
	border-radius: 20rpx;
	text-align: center;
	line-height: 10px;
	color: #FB4457;
    font-size: 24rpx;
	padding: 10rpx 20rpx;
    margin-right: 20rpx;
	 white-space: nowrap; /* 禁止文本换行 */
	 position: absolute;
	 bottom: -5px;

					}
.tag {
	position: relative;
	top: 28px;
	width: auto;
	height: 23px;
	line-height: 45rpx;
	display: block;
    font-weight: 1000;
	padding: 19rpx 19rpx;
	margin-left: auto;
    margin-right: auto;
	font-size: 40rpx;
    color: #FFFFFF;
	border-radius: 10rpx;
    transform: skew(-15deg);
    background-image: linear-gradient(to right, #ff5a5a, #ff7467);
	box-shadow: 0 0 rpx #ff0101;

				}

.red{
	display: inline-block;
	padding-left: 2px;
	padding-right: 2px;
	width: max-content;
	height: 15px;
	font-size: 12px;
	background-color: red;
	color: #eee;
	text-align: center; 
	line-height: 15px;
	margin-left: 0%;
	margin-right: 5px;
	border-radius: 20%; /* 设置圆角为50%，使按钮成为圆形 */
	
}
.brown{
	padding-left: 2px;
	padding-right: 2px;
	width: 35px;
	height: 15px;
	font-size: 12px;
	background-color: saddlebrown;
	color: #eee;
	text-align: center; 
	line-height: 15px;
	margin-left: 0%;
	margin-right: 5px;
	border-radus: 20%; /* 设置圆角为50%，使按钮成为圆形 */
	
}
.green{
	padding-left: 2px;
	padding-right: 2px;
	width: 35px;
	height: 15px;
	font-size: 12px;
	background-color: green;
	color: #eee;
	text-align: center; 
	line-height: 15px;
	margin-left: 0%;
	border-radius: 20%; /* 设置圆角为50%，使按钮成为圆形 */
}
.population{
	text-align: left;
		margin-left: 0; 
	font-size: 12px;
	color: #666;
}
.list-content-son{
	display:  flex;
	width: 100%;
	position: absolute;
	bottom: 0; /* 将元素放置在父元素的底部 */
	 justify-content: space-between; /* 这将使第一个元素靠左，最后一个元素靠右 */
}
.note2 {
	text-align: right;
	
	margin-right: 5px;
  font-size: 12px;
  color: #666;
}

.uni-load-more {
  text-align: center;
  padding: 10px;
}
</style>
